<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI对话系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/echarts@5.4.3/dist/echarts.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css"
    />
    <style>
      .chat-container {
          height: calc(100vh - 180px);
      }
      .message-animation {
          animation: fadeIn 0.3s ease-in-out;
      }
      @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
      }
      .send-animation {
          animation: sendPulse 0.5s ease-out;
      }
      @keyframes sendPulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.05); }
          100% { transform: scale(1); }
      }
      .typing-indicator {
          display: inline-block;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #6b7280;
          margin-right: 4px;
          animation: typing 1.4s infinite ease-in-out;
      }
      .typing-indicator:nth-child(2) {
          animation-delay: 0.2s;
      }
      .typing-indicator:nth-child(3) {
          animation-delay: 0.4s;
          margin-right: 0;
      }
      @keyframes typing {
          0%, 60%, 100% { transform: translateY(0); }
          30% { transform: translateY(-5px); }
      }
    </style>
  </head>
  <body class="bg-gray-100">
    <div class="container mx-auto max-w-6xl p-4">
      <!-- 头部区域 -->
      <header
        class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl shadow-lg p-4 mb-6 flex items-center justify-between"
      >
        <div class="flex items-center">
          <div class="relative">
            <img
              src="https://aidev.gemcoder.com/staticResource/echoAiSystemImages/6ff34e70d37647a9839c03b1c9ae710a.png"
              alt="AI头像"
              class="w-12 h-12 rounded-full object-cover mr-3 border-2 border-white shadow-md"
            />
            <span
              class="absolute bottom-0 right-3 w-3 h-3 bg-green-400 rounded-full border-2 border-white"
            >
            </span>
          </div>
          <h1 class="text-2xl font-bold text-white">AI对话系统</h1>
        </div>
        <div class="flex space-x-3">
          <button
            class="p-2 rounded-full bg-white/20 hover:bg-white/30 text-white transition-all duration-200"
          >
            <i class="fas fa-cog"> </i>
          </button>
          <button
            class="p-2 rounded-full bg-white/20 hover:bg-white/30 text-white transition-all duration-200"
          >
            <i class="fas fa-history"> </i>
          </button>
        </div>
      </header>
      <!-- 聊天主区域 -->
      <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <!-- 消息显示区域 -->
        <div
          id="chat-messages"
          class="chat-container overflow-y-auto p-6 space-y-6"
        >
          <!-- 欢迎消息 -->
          <div class="message-animation flex">
            <div class="flex-shrink-0 mr-4">
              <img
                src="https://aidev.gemcoder.com/staticResource/echoAiSystemImages/a90da53e5382df4e0705ab1e11d9808d.png"
                alt="AI头像"
                class="w-10 h-10 rounded-full object-cover border-2 border-blue-100 shadow-sm"
              />
            </div>
            <div
              class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-4 max-w-3/4 shadow-sm"
            >
              <p class="text-gray-800">
                您好！我是AI助手，很高兴为您服务。请问有什么可以帮您的吗？
              </p>
              <p class="text-xs text-gray-400 mt-2">刚刚</p>
            </div>
          </div>
        </div>
        <!-- 输入区域 -->
        <div
          class="border-t border-gray-100 p-4 bg-gradient-to-b from-gray-50 to-white"
        >
          <div class="flex items-center space-x-3">
            <button
              class="p-3 rounded-full bg-white hover:bg-gray-100 text-gray-600 border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200"
            >
              <i class="fas fa-plus"> </i>
            </button>
            <div class="flex-grow relative">
              <textarea
                id="user-input"
                class="w-full border border-gray-200 rounded-xl py-3 px-5 pr-12 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent resize-none shadow-sm hover:shadow-md transition-all duration-200"
                rows="1"
                placeholder="输入您的问题..."
                style="min-height: 48px;"
              >
              </textarea>
              <button
                class="absolute right-3 bottom-3 p-1 text-gray-500 hover:text-blue-500 transition-colors duration-200"
              >
                <i class="fas fa-microphone"> </i>
              </button>
            </div>
            <button
              id="send-btn"
              class="p-3 rounded-full bg-gradient-to-br from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white shadow-md hover:shadow-lg transition-all duration-200 send-animation"
            >
              <i class="fas fa-paper-plane"> </i>
            </button>
          </div>
          <div
            class="flex justify-between items-center mt-3 text-xs text-gray-400"
          >
            <div class="flex space-x-3">
              <button
                class="hover:text-blue-500 transition-colors duration-200"
              >
                <i class="fas fa-keyboard"> </i>
                快捷指令
              </button>
            </div>
            <div>
              <span id="char-count" class="font-medium"> 0/1000 </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        var userInput = document.getElementById('user-input');
        var sendBtn = document.getElementById('send-btn');
        var chatMessages = document.getElementById('chat-messages');
        var charCount = document.getElementById('char-count');
        // 自动调整输入框高度
        userInput.addEventListener('input', function () {
          this.style.height = 'auto';
          this.style.height = this.scrollHeight + 'px';

          // 更新字符计数
          charCount.textContent = "".concat(this.value.length, "/1000");
        });
        // 发送消息
        function sendMessage() {
          var message = userInput.value.trim();
          if (message === '') return;

          // 添加用户消息
          addMessage(message, 'user');

          // 清空输入框
          userInput.value = '';
          userInput.style.height = 'auto';
          charCount.textContent = '0/1000';

          // 显示AI正在输入状态
          var typingIndicator = showTypingIndicator();

          // 模拟AI回复
          setTimeout(function () {
            removeTypingIndicator(typingIndicator);
            var responses = ["我理解您的问题了。让我为您详细解答...", "这是一个很好的问题！根据我的分析...", "感谢您的提问。关于这个问题...", "我明白您的困惑了。让我帮您梳理一下..."];
            var randomResponse = responses[Math.floor(Math.random() * responses.length)];
            addMessage(randomResponse, 'ai');
          }, 1500 + Math.random() * 2000);
        }
        // 添加消息到聊天区域
        function addMessage(content, sender) {
          var messageDiv = document.createElement('div');
          messageDiv.className = 'message-animation flex';
          if (sender === 'user') {
            messageDiv.innerHTML = "\n                        <div class=\"flex-grow\"></div>\n                        <div class=\"bg-gradient-to-br from-blue-500 to-indigo-600 text-white rounded-2xl p-4 max-w-3/4 shadow-md\">\n                            <p>".concat(content, "</p>\n                            <p class=\"text-xs text-blue-100 mt-2\">\u521A\u521A</p>\n                        </div>\n                        <div class=\"flex-shrink-0 ml-4\">\n                            <img src=\"https://aidev.gemcoder.com/staticResource/echoAiSystemImages/c66d37a79fbdc893c1ee01dcdf270a91.png\" \n                                 alt=\"\u7528\u6237\u5934\u50CF\" \n                                 class=\"w-10 h-10 rounded-full object-cover border-2 border-blue-100 shadow-sm\">\n                        </div>\n                    ");
            messageDiv.classList.add('justify-end');
          } else {
            messageDiv.innerHTML = "\n                        <div class=\"flex-shrink-0 mr-4\">\n                            <img src=\"https://aidev.gemcoder.com/staticResource/echoAiSystemImages/a90da53e5382df4e0705ab1e11d9808d.png\" \n                                 alt=\"AI\u5934\u50CF\" \n                                 class=\"w-10 h-10 rounded-full object-cover border-2 border-blue-100 shadow-sm\">\n                        </div>\n                        <div class=\"bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-4 max-w-3/4 shadow-sm\">\n                            <p class=\"text-gray-800\">".concat(content, "</p>\n                            <p class=\"text-xs text-gray-400 mt-2\">\u521A\u521A</p>\n                        </div>\n                    ");
          }
          chatMessages.appendChild(messageDiv);
          chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 显示AI正在输入状态
        function showTypingIndicator() {
          var typingDiv = document.createElement('div');
          typingDiv.className = 'message-animation flex';
          typingDiv.innerHTML = "\n                    <div class=\"flex-shrink-0 mr-4\">\n                        <img src=\"https://aidev.gemcoder.com/staticResource/echoAiSystemImages/a90da53e5382df4e0705ab1e11d9808d.png\" \n                             alt=\"AI\u5934\u50CF\" \n                             class=\"w-10 h-10 rounded-full object-cover border-2 border-blue-100 shadow-sm\">\n                    </div>\n                    <div class=\"bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl p-4 max-w-3/4 shadow-sm\">\n                        <div class=\"flex items-center\">\n                            <div class=\"typing-indicator\"></div>\n                            <div class=\"typing-indicator\"></div>\n                            <div class=\"typing-indicator\"></div>\n                        </div>\n                    </div>\n                ";
          chatMessages.appendChild(typingDiv);
          chatMessages.scrollTop = chatMessages.scrollHeight;
          return typingDiv;
        }

        // 移除AI正在输入状态
        function removeTypingIndicator(typingDiv) {
          if (typingDiv && typingDiv.parentNode) {
            typingDiv.parentNode.removeChild(typingDiv);
          }
        }
        // 点击发送按钮
        sendBtn.addEventListener('click', function () {
          sendBtn.classList.add('send-animation');
          setTimeout(function () {
            sendBtn.classList.remove('send-animation');
          }, 500);
          sendMessage();
        });

        // 按Enter键发送消息
        userInput.addEventListener('keydown', function (e) {
          if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendBtn.classList.add('send-animation');
            setTimeout(function () {
              sendBtn.classList.remove('send-animation');
            }, 500);
            sendMessage();
          }
        });
      });
    </script>
  </body>
</html>